<template>
  <div class="header">
    <div class="innerheader">
      <div class="left_header">
        <div class="swiper">
          <el-carousel height="40px" indicator-position='none' direction="vertical">
            <el-carousel-item v-for="item in saying" :key="item">
              <vs-tooltip color="#7193f9" bottom border-thick>
                <vs-button color="#7193f9" transparent>
                  {{ item }}
                </vs-button>
                <template #tooltip>
                  <h3 style="color: #7193f9" class="medium">{{ item }}</h3>
                </template>
              </vs-tooltip>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="right_header">
        <vs-switch dark style="width: 60px" @change="onChange" v-model="theme">
          <template #circle>
            <i v-if="!theme" class='bx el-icon-moon' ></i>
            <i v-else class='el-icon-sunny' ></i>
        </template>
          <template #off>
            <i class="el-icon-sunny" />
          </template>
          <template #on>
            <i class="el-icon-moon" />
          </template>
        </vs-switch>
        <vs-avatar size="32" badge badge-color="success">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F86f8eda0-7ed3-424b-b6a8-9a8354db8cca%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1691812434&t=10caf0c520c80fa0a0be9062490d408e"
            alt=""
          />
        </vs-avatar>
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            <el-button type="text"
              >陈乖乖<i class="el-icon-arrow-down el-icon--right"></i
            ></el-button>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              ><vs-button @click="showSome(true)" transparent>
                猜猜我是谁
              </vs-button></el-dropdown-item
            >
            <el-dropdown-item
              ><vs-button @click="showSome()" transparent>
                更多信息
              </vs-button></el-dropdown-item
            >
            <el-dropdown-item
              ><vs-button @click="open = true" transparent>
                退出登录
              </vs-button></el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <vs-dialog width="550px" not-center v-model="some">
      <template #header>
        <h4 class="not-margin">
          {{ sometitle }}
        </h4>
      </template>

      <div class="con-content">
        <p>
          {{ somedesc }}
        </p>
      </div>

      <template #footer>
        <div class="con-footer">
          <vs-button @click="some = false" transparent> Ok </vs-button>
        </div>
      </template>
    </vs-dialog>
    <vs-dialog width="550px" v-model="open">
      <template #header>
        <h4 class="not-margin">退出登录</h4>
      </template>

      <div class="con-content">
        <p>确认退出登录？</p>
      </div>

      <template #footer>
        <div style="display: flex; float: right">
          <vs-button @click="loginout" transparent> 确认 </vs-button>
          <vs-button @click="cancel" dark transparent> 取消 </vs-button>
        </div>
      </template>
    </vs-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      open: false,
      theme: false,
      some: false,
      sometitle: '123',
      somedesc: '123Vuesax is a relatively new framework with a refreshing design and in the latest trends, vuesax based on vuejs which means that we go hand in hand with one of the most popular javascript frameworks in the world and with a huge community with which you will have all the help and documentation to create and make your project',
      saying: ['有些人注定是等待别人的，有些人是注定被人等的',
        '热恋的时候，不必那麽现实，失恋之后，却必须现实一点，一切已经完了，各有天涯路，多麽不舍，也要放手。',
        '当你需要站起时，有人会搀扶你；当你需要爱意时，有人会关注你；当你觉得生命有意义时，你就已经感受到了爱！',
        '世界的温柔，是晚来的善意和干净的你',
        '不是因为你是一个怎样的人，而是因为我喜欢与你在一起时的感觉。']
    }
  },
  created () {
    this.theme = this.$store.state.theme
  },
  watch: {
    '$store.state.theme' () {
      this.theme = this.$store.state.theme
    }
  },
  methods: {
    showSome(guess){
      if(guess){
        this.sometitle='猜猜我是谁'
        this.somedesc='哈哈哈哈，无名小卒一位'
      }else{
        this.sometitle='我的更多信息'
        this.somedesc='哈哈哈哈，我没有更多信息'
      }
      this.some=true
    },
    onChange () {
      this.$store.state.theme = this.theme
    },
    loginout () {
      this.$router.push("/login")
      localStorage.removeItem("username")
      localStorage.removeItem("password")
      this.$message({ message: "退出登录" })
      this.open = false
    },
    cancel () {
      this.open = false
      this.$message({
        type: "info",
        message: "保持登录"
      })
    }
  },
};
</script>

<style lang="less" scoped>
.header {
  padding: 12px 24px;
  .left_header {
    display: flex;
    align-items: center;
    .swiper {
      min-width: 100vh;
    }
  }
  .innerheader {
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .right_header {
    display: flex;
    align-items: center;
    & > * {
      margin-left: 16px;
    }
  }
}
</style>